:root {
   --songsheet: aliceblue;
}
.banner {
   padding-top: 5px;
   max-width: 1400px;
   margin: 0 auto;
}
.information {
   max-width: 1200px;
   margin: 0 auto;
}
.songlist {
}
.songlist > div {
   width: 20%;
   display: inline-block;
   box-sizing: border-box;
   padding: 1%;
}
.today {
   width: 100%;
   background: var(--songsheet);
   border: 3px solid white;
   border-radius: 12px;
   position: relative;
   margin: 0 auto;
   margin: 5px;
}
.today > div {
   margin: 0 auto;
   position: relative;
   background-size: cover;
   border-radius: 5%;
   overflow: hidden;
   width: 99%;
}
.today a {
   display: inline-block;
   width: 80%;
   margin-top: 5px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.today > div > div:nth-child(1) {
   width: 100%;
   height: 100%;
}
.today > div > .today-blur {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(25px);
}
.today > div > div img {
   width: 100%;
   height: 100%;
   object-fit: inherit;
}
.today > div > .today-img span + svg {
   position: absolute;
   overflow: hidden;
   color: white;
}
.today > div > div > span {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 1.4rem;
   font-weight: bold;
   word-spacing: 10px;
   margin-top: 10%;
}
.today > div:hover > .play-songsheet {
   opacity: 1;
}
.newsong {
}
.newsong > div {
   display: inline-block;
   box-sizing: border-box;
   border-radius: 5px;
   /* border: 2px solid white; */
   width: 32.33%;
   margin: 2px;
   transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.newsong > div:hover {
   background-color: var(--lightcolor3);
}
.newsong > div:hover .play-style {
   opacity: 1;
}
.newsong-active {
   background-color: var(--lightcolor3);
}
.newsong > div > .newsong-img {
   width: 20%;
   border-radius: 10%;
   overflow: hidden;
}
.newsong > div > div {
   display: inline-block;
   vertical-align: middle;
}
.newsong > div > .newsong-msg {
   box-sizing: border-box;
   width: 80%;
   text-align: left;
   padding-left: 10px;
}
.newsong > div > .newsong-img img {
   width: 100%;
   object-fit: inherit;
}
.newsong span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.mv-item {
   padding: 10px;
   width: 33%;
   box-sizing: border-box;
   display: inline-block;
}
.mv-item > .mv-pic {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
}
.mv-item > .mv-pic > .mv-copywriter,
.mv-playcount {
   position: absolute;
   top: 0;
   color: white;
   padding: 8px;
}
.mv-item > .mv-pic > .mv-copywriter {
   top: -40px;
   width: 100%;
   text-align: left;
   background-color: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(10px);
   transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.mv-item > .mv-pic:hover .mv-copywriter {
   top: 0px;
}
.mv-item > .mv-pic > .mv-playcount {
   right: 0;
   padding: 5px;
}
.mv-item > .mv-pic > .mv-img img {
   width: 100%;
   object-fit: inherit;
}
.mv-item > .mv-msg {
   text-align: left;
}
.mv-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
